<template>
  <div>
    <div class="recommend-title">热销推荐</div>
    <ul class="recommend-content">
      <li v-for="(item) of recommendList" :key="item.id">
        <img class="recommend-imgs" :src="item.imgUrl" :alt="item.id">
        <div class="recommend-tips">
            <p class="recommend-tips-title">{{item.title}}</p>
            <p class="recommend-tips-desc">{{item.desc}}</p>
            <span class="recommend-tips-detail">查看详情</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'recommend',
  data () {
    return {
      recommendList: [{
        id: '001',
        imgUrl: 'https://imgs.qunarzz.com/vs_ceph_vs_tts/4636d3ad-3468-4f4a-82c6-b7ac11427125.jpg_r_480x320x90_7cab183d.jpg',
        title: '大连圣亚海洋世界',
        desc: '大连圣亚海洋世界大连圣亚海洋世界'
      }, {
        id: '002',
        imgUrl: 'https://imgs.qunarzz.com/vs_ceph_vs_tts/4636d3ad-3468-4f4a-82c6-b7ac11427125.jpg_r_480x320x90_7cab183d.jpg',
        title: '大连圣亚海洋世界',
        desc: '大连圣亚海洋世界大连圣亚海洋世界'
      }, {
        id: '003',
        imgUrl: 'https://imgs.qunarzz.com/vs_ceph_vs_tts/4636d3ad-3468-4f4a-82c6-b7ac11427125.jpg_r_480x320x90_7cab183d.jpg',
        title: '大连圣亚海洋世界',
        desc: '大连圣亚海洋世界大连圣亚海洋世界'
      }, {
        id: '004',
        imgUrl: 'https://imgs.qunarzz.com/vs_ceph_vs_tts/4636d3ad-3468-4f4a-82c6-b7ac11427125.jpg_r_480x320x90_7cab183d.jpg',
        title: '大连圣亚海洋世界',
        desc: '大连圣亚海洋世界大连圣亚海洋世界'
      }]
    }
  }
}
</script>

<style scoped lang="stylus">
  @import "~styles/varibles.styl"
  .recommend-title
    margin-top .2rem
    line-height .8rem
    text-indent .2rem
    background $bgTitleColor
  .recommend-content
    li
      /*border-bottom solid 1px #ccc*/
      height 1.9rem
      display flex
      overflow hidden
      .recommend-imgs
        width: 1.7rem
        height 1.7rem
        padding .1rem
      .recommend-tips
        flex 1
        padding .1rem
        min-width 0
        .recommend-tips-title
          line-height .54rem
          font-size .32rem
        .recommend-tips-desc
          line-height .6rem
          color #ccc
          overflow: hidden
          text-overflow:ellipsis
          white-space: nowrap
        .recommend-tips-detail
          line-height .44rem
          margin-top .16rem
          padding 0.04rem 0.2rem
          border-radius .0.06rem
          color #fff
          background #ff9300
</style>
